<template>
  <div>
    <ul>
      <li 
        :class="{active: index === currentIndex}" 
        v-for="item,index in items"
        @click="handleClick(index)"
      >
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      items: ['item1', 'item2', 'item3', 'item4']
    }
  },

  methods: {
    handleClick(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style scoped>
  li.active {
    font-size: 50px;
    color: red
  }
</style>